<template>
  <div id="wrapper">
    <div class="RecordingBtn" v-if="pageIndex === 0">
      <div>
      <el-form class="setForm" ref="form" :model="form" label-width="100px">
        <el-form-item label="清晰度:">
          <el-radio-group v-model="form.definition" size="medium">
            <el-radio-button :label="1.5">高</el-radio-button>
            <el-radio-button :label="1">中</el-radio-button>
            <el-radio-button :label="0.7">低</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="声音:">
          <el-radio-group v-model="form.voiceType" size="medium">
            <el-radio-button label="system">系统声音</el-radio-button>
            <el-radio-button label="microphone">麦克风声音</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="存储目录:">
          <div class="saveDir">
            <el-input
              v-model="form.saveDir"
              readonly
              placeholder="请选择文件目录"
            >
              <el-button
                @click="openFold"
                slot="append"
                icon="el-icon-folder-opened"
              ></el-button
            ></el-input>
            <span class="subjectColor" @click="openFileHandler">更改目录</span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="large" @click="recordingBtn"
            >录制屏幕</el-button
          >
        </el-form-item>
      </el-form>
      <div class="tips">
        <div class="tips-title">快捷键：</div>
        <p>开始录制：Ctrl + Shift + B</p>
        <p>结束录制：Ctrl + Shift + S</p>
      </div>
      </div>
    </div>
    <div class="screenList" v-if="pageIndex === 1">
      <div class="videoList">
        <div
          class="videoList-item"
          :class="{ active: recordSourceId == item.id }"
          v-for="(item, index) in sourcesList"
          :key="index"
          @click="recordSourceId = item.id"
        >
          <!-- <video class="videobox" :ref="item.id" autoplay></video> -->
          <img class="screen" :src="getStream(item)" alt="" />
          <p :title="item.name">
            <img
              class="avatar"
              v-if="item.appIcon"
              :src="getIcon(item)"
              alt=""
            />{{ item.name }}
            <!-- <el-avatar class="avatar" v-if="item.appIcon" size="small" :src="getIcon(item)"></el-avatar>{{ item.name }} -->
          </p>
        </div>
      </div>
      <div class="beginRecordBtn">
        <el-button size="large" @click="pageIndex = 0">返回</el-button>
        <el-button
          type="primary"
          size="large"
          :disabled="!recordSourceId"
          @click="beginRecordBtn"
          >开始录制</el-button
        >
      </div>
    </div>
    <div class="recording" v-if="pageIndex === 2">
      <video class="videobox" ref="preview" autoplay></video>
      <div class="stopRecord">
        <el-button
          type="primary"
          @click="btnStopRecordClicked"
          :disabled="!recording"
          >停止录制</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { windowCreate } from "./../../main/window/Plugins";
import PlayerCanvas from "../PlayerCanvas";

var SCREEN_WIDTH = window.screen.width;
var SCREEN_HEIGHT = window.screen.height;
const { desktopCapturer,ipcRenderer,remote } = require("electron");
const { dialog, shell } = require("electron").remote;

export default {
  name: "landing-page",
  components: {},
  data() {
    return {
      recording: false,
      _playerCanvas: null,
      pageIndex: 0, //第几页
      sourcesList: [], //获取应用窗口列表
      srcObject: {},
      recordSourceId: null, //将要录制的窗口id
      form: {
        //设置
        saveDir:
          process.platform == "darwin" ? "/Users/uat_record" : "C:\\uat_record",
        definition: 1,
        voiceType: "system",
      },
    };
  },
  mounted() {
    console.log(window.location.href);
    ipcRenderer.on("startRecord", () => {
        console.log('startRecord');
        if (this.recordSourceId) {
          this.beginRecordBtn()
        }else{
          this.$message({
            message: '请先选择要录制的窗口',
            type: 'warning'
          });
        }
    });
    if (this.$ElStore.get("recordForm")) {
      this.form = this.$ElStore.get("recordForm");
    }
  },
  methods: {
    goRecord() {
      //ipcRenderer.send('window-new')
      const win = remote.getCurrentWindow();
      windowCreate({
        title: "录制页面",
        route: "/recording",
        width: 340,
        height: 140,
        backgroundColor: "#00000000",
        transparent: true,
        resizable: false,
        parentId:win.id,
        modal: true,
        x:window.screen.width - 300,
        y:window.screen.height - 160
      });
      win.hide()
      // windowCreate({
      //   title: "录制页面",
      //   route: "/recording",
      //   width: 700,
      //   height: 500,
      //   backgroundColor: "#00000000",
      //   transparent: true,
      //   resizable: false,
      //   parentId:win.id,
      //   modal: true
      // });
      //this.$router.push('/recording')
    },
    // 选择文件存储路径事件
    openFileHandler() {
      dialog
        .showOpenDialog({
          properties: ["openDirectory"],
          defaultPath: this.form.saveDir,
        })
        .then((res) => {
          if (!res.canceled) {
            this.$set(this.form, "saveDir", res.filePaths[0]);
            //this.form.saveDir = res.filePaths[0];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //打开文件夹
    openFold() {
      shell.showItemInFolder(this.form.saveDir);
    },
    //选择录制屏幕
    recordingBtn() {
      SCREEN_WIDTH = parseInt(window.screen.width * this.form.definition);
      SCREEN_HEIGHT = parseInt(window.screen.height * this.form.definition);
      this.pageIndex = 1;
      this.getScreen();
      this._playerCanvas = new PlayerCanvas(SCREEN_WIDTH, SCREEN_HEIGHT);
      this.$ElStore.set("recordForm", this.form);
    },
    //开始录制
    beginRecordBtn() {
      //this.pageIndex = 2;
      //this.btnStartRecordClicked();
      this.pageIndex = 0;
      this.$ElStore.set("recordSourceId", this.recordSourceId);
      this.recordSourceId = ''
      this.goRecord();
    },
    getIcon(item) {
      if (item.appIcon) {
        return item.appIcon.toDataURL();
      }
    },
    getStream(item) {
      return item.thumbnail.toDataURL();
    },
    getScreen() {
      let self = this;
      desktopCapturer.getSources(
        {
          types: ["window", "screen"],
          thumbnailSize: {
            height: parseInt(SCREEN_HEIGHT * 0.3), // 窗口或屏幕的截图快照高度
            width: parseInt(SCREEN_WIDTH * 0.3), // 窗口或屏幕的截图快照宽度
          },
          fetchWindowIcons: true, // 如果视频源是窗口且有图标，则设置该值可以捕获到的窗口图标
        },
        (error, sources) => {
          console.log(error);
          if (error) throw error;
          self.sourcesList = sources;// sources 当前屏幕和应用窗口的数组
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Source Sans Pro", sans-serif;
}

#wrapper {
  background: radial-gradient(
    ellipse at top left,
    rgba(255, 255, 255, 1) 40%,
    rgba(229, 229, 229, 0.9) 100%
  );
  height: 100vh;
  padding: 5px 5px;
  width: 100vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .tips{
    background: #f0f9eb;
    border-radius: 4px;
    color: #67c23a;
    font-size: 14px;
    line-height: 21px;
    padding: 8px 16px;
    &-title{
      font-weight: 700;
    }
  }
  .RecordingBtn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .setForm {
      width: 700px;
    }

    /* 存储目录 */
    .saveDir {
      display: flex;
      align-items: center;
      .subjectColor {
        width: 80px;
        font-size: 14px;
        cursor: pointer;
        margin-left: 10px;
        color: #409eff;
      }
    }
  }
  .screenList {
    width: 100%;
    .beginRecordBtn {
      text-align: center;
      display: block;
      margin: 20px auto;
    }
  }
  .videoList {
    height: calc(100vh - 100px);
    overflow: auto;
    &-item {
      display: inline-block;
      width: 30%;
      margin: 1.5%;
      cursor: pointer;
      padding: 30px;
      border-radius: 5px;
      &.active {
        border: 1px solid #409eff;
      }
      .videobox {
        height: auto;
      }
      .screen {
        width: 100%;
      }
      p {
        height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 50px;
        .avatar {
          width: 25px;
          height: 25px;
          display: inline-block;
          margin-right: 10px;
          vertical-align: middle;
        }
      }
    }
    &-item:hover {
      border: 1px solid #409eff;
    }
  }
  .recording {
    width: 100%;
    text-align: center;
    .videobox {
      margin-bottom: 30px;
    }
    .stopRecord {
      margin: 0 auto;
    }
  }
}
#wrapper .videobox {
  width: 50%;
}
.btnbox {
  text-align: right;
}
.btnbox .btn {
  padding: 4px 10px;
  cursor: pointer;
}
</style>
